<template>
  <div class="app-container">
    <div class="app-container__section">
      <PlusSearch
        v-bind="searchBinds"
        :columns="columns"
        v-model="gSearchForm"
      >
      </PlusSearch>
    </div>
    <div class="app-container__section">
      <PlusTable
        v-bind="tableBinds"
        :columns="columns"
      >
        <template #title>
          <el-button type="primary" plain icon="Plus" @click="openSelectUser" v-hasPermi="['system:role:add']">添加用户</el-button>
          <el-button type="danger" plain icon="CircleClose" :disabled="gSelection.length<1" @click="cancelAuthUserAll" v-hasPermi="['system:role:remove']">批量取消授权</el-button>
          <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
        </template>
        <template #toolbar>
          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>
        <template #plus-cell-status="{row}">
          <dict-tag :options="sys_normal_disable" :value="row.status" />
        </template>
        <template #plus-cell-action="{row}">
          <el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
        </template>
      </PlusTable>
    </div>

    <select-user ref="selectRef" :roleId="roleId" @ok="gGetList" />
  </div>
</template>

<script setup >
import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role'
import selectUser from './selectUser'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import { formatRangeTime } from '@/utils/index.js'
import { useListHook } from '@/hooks/crud/index.js'
const route = useRoute()
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
defineOptions({
  name:'AuthUser'
})
const roleId = computed(() => +route.params.roleId)
const columns = [
  {
    label: '用户账号',
    prop: 'userName',
    tableColumnProps:{
      align:'center'
    }
  },
  {
    label: '用户昵称',
    prop: 'nickName',
    tableColumnProps:{
      align:'center'
    }
  },
  {
    label: '邮箱',
    prop: 'email',
    hideInSearch: true,
    tableColumnProps:{
      align:'center'
    }
  },
  {
    label: '手机',
    prop: 'phonenumber',
    tableColumnProps:{
      align:'center'
    }
  },
  {
    label: '状态',
    prop: 'status',
    tableColumnProps:{
      align:'center'
    }
  },
  {
    label: "创建时间",
    prop: "createTime",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    },
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      format: "YYYY-MM-DD"
    },
    render: val=> proxy.parseTime(val)
  },
  {
    label: "操作",
    prop: "action",
    width: 130,
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  }
]



// ====================列表逻辑=========================
const gSearchForm = ref({ })
const { gGetList, gAllExposeOption,gLoadingStatus } = useListHook({
  listApiFn:allocatedUserList,
  gSearchForm,
  beforeRequest: (reqData) => {
    let { createTime, ...rest } = reqData;
    let timeRange = formatRangeTime(createTime,undefined,'YYYY-MM-DD')
    return {
      ...rest,
      roleId:roleId.value,
      params:timeRange
    }
  },
  afterRequest: (resData) => {
    return resData
  }
})
// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption }))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption } ))



// 返回按钮
function handleClose() {
  const obj = { path: '/system/role' }
  proxy.$tab.closeOpenPage(obj)
}


/** 打开授权用户表弹窗 */
function openSelectUser() {
  proxy.$refs['selectRef'].show()
}
/** 取消授权按钮操作 */
function cancelAuthUser({ userId,userName}) {
  proxy.$modal
    .confirm('确认要取消该用户"' + userName + '"角色吗？')
    .then(function () {
      return authUserCancel({ userId, roleId: roleId.value })
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('取消授权成功')
    })
    .catch(() => {})
}
/** 批量取消授权按钮操作 */
function cancelAuthUserAll(row) {
  const userIds = gSelection.value.map(item=>item.userId).join(',')
  proxy.$modal
    .confirm('是否取消选中用户授权数据项?')
    .then(function () {
      return authUserCancelAll({ roleId: roleId.value ,userIds })
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('取消授权成功')
    })
    .catch(() => {})
}

</script>
